<template>
  <div class="home-container" align="center">
    <!-- <meta v-if="publishStatus" name="referrer" content="no-referrer"> -->
    <el-container v-if="!publishStatus">
      <el-main>
        <el-card shadow="never" class="cardInfo">
          <div slot="header" class="clearfix" align="center">
            <h3>绑定支付宝小程序</h3>
          </div>
          <div class="wechatApplet" align="center">
            <div class="wechatApplet-detail" align="center">
              <div class="wechatApplet-detail-item" align="center">
                <el-row :gutter="40">
                  <el-col :xs="12" :md="8" :lg="6" class="list-item">
                    <h3 class="intro-title text-elepsis ng-binding">已经注册支付宝小程序</h3>
                  </el-col>
                </el-row>
                <el-row :gutter="40" align="middle">
                  <el-col :xs="12" :md="8" :lg="6" class="list-item">
                    <div class="item-img">
                      <img src="../../assets/common/weixin_author_icon.png" alt="">
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="40">
                  <el-col :xs="12" :md="8" :lg="6" class="list-item">
                    <el-button type="primary" size="middle" style="min-width: 250px;" @click="bandAlipayApplet({})">绑定注册小程序</el-button>
                  </el-col>
                </el-row>
                <el-row :gutter="40">
                  <el-col :xs="8" :md="4" :lg="4" class="list-item">
                    <div class="item-intro" align="center">
                      <p class="intro-detail">在绑定小程序前，确保支付宝小程序已通过认证；</p>
                      <p class="intro-detail">并尽量把所有权限都授予平台</p>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="wechatApplet-detail-item">
                <el-row :gutter="40">
                  <el-col :xs="12" :md="8" :lg="6" class="list-item">
                    <h3 class="intro-title text-elepsis ng-binding">未注册支付宝小程序</h3>
                  </el-col>
                </el-row>
                <el-row :gutter="40" align="middle">
                  <el-col :xs="12" :md="8" :lg="6" class="list-item">
                    <div class="item-img">
                      <img src="../../assets/common/weixin_regist_icon.png" alt="">
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="40">
                  <el-col :xs="12" :md="8" :lg="6" class="list-item">
                    <el-button type="text" size="middle" style="min-width: 250px;border: 1px solid #e6ebf5;" @click="goAlipayRegistration({})">没有小程序，去申请</el-button>
                  </el-col>
                </el-row>
                <el-row :gutter="40">
                  <el-col :xs="8" :md="4" :lg="4" class="list-item">
                    <div class="item-intro" align="center">
                      <p class="intro-detail">前往支付宝商家平台创建小程序，认证通过后；</p>
                      <p class="intro-detail">再回到本平台进行小程序绑定</p>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-card>
      </el-main>
    </el-container>
    <el-container v-else>
      <div class="wechatApplet-containerInfo">
        <el-header class="headerInfo">
          <h4>基本信息</h4>
          <router-link to="">
            <h6 style="float: right; padding-right: 10px;color: #5FBCFC;" @click="cancelAuth()">取消授权</h6>
          </router-link>
        </el-header>
        <div>
          <el-row>
            <el-col :span="24">
              <el-row>
                <el-col :span="4" class="columnInfo-label">
                  <div align="right">
                    <p>小程序简称：</p>
                  </div>
                </el-col>
                <el-col :span="20" class="columnInfo-value">
                  <el-row :gutter="0">
                    <el-col :span="24">
                      <div align="left" class="columnInfo-value-intro">
                        <p>{{ params.openAuthOfExtend.openAuthOfAlipayOpen.nickName }}</p>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="0" type="flex" justify="left">
                    <el-col :span="24">
                      <div class="columnInfo-value-intro" align="left">
                        <p class="columnInfo-value-remark">支付宝小程序简称，每年可修改2次；</p>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-row>
                <el-col :span="4" class="columnInfo-label">
                  <div align="right">
                    <p>小程序介绍：</p>
                  </div>
                </el-col>
                <el-col :span="20" class="columnInfo-value">
                  <el-row :gutter="0">
                    <el-col :span="24">
                      <div align="left" class="columnInfo-value-intro">
                        <p>{{ params.openAuthOfExtend.openAuthOfAlipayOpen.signature }}</p>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="0" type="flex" justify="left">
                    <el-col :span="24">
                      <div class="columnInfo-value-intro" align="left">
                        <p class="columnInfo-value-remark">小程序发布后，非个人类帐号可通过认证方式改名；</p>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-row style="display: flex;">
                <el-col :span="4" class="columnInfo-label">
                  <div align="right">
                    <p>小程序授权状态：</p>
                  </div>
                </el-col>
                <el-col :span="16" class="columnInfo-value">
                  <el-row :gutter="0">
                    <el-col :span="24">
                      <div align="left" class="columnInfo-value-intro">
                        <p>{{ params.hasOpenAuth?'已授权':'未授权' }}</p>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="0" type="flex" justify="left">
                    <el-col :span="24">
                      <div class="columnInfo-value-intro" align="left">
                        <p class="columnInfo-value-remark">你的支付宝小程序已授权给本平台；</p>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="4" class="columnInfo-value">
                  <el-row style="display: flex;">
                    <el-col :span="12" class="columnInfo-label">
                      <div style="text-align: right;vertical-align: middle;">
                        <router-link to="" class="columnInfo-value-intro">
                          <p class="columnInfo-value-remark" style="color: #5FBCFC;" @click="bandAlipayApplet({})">重新授权</p>
                        </router-link>
                      </div>
                    </el-col>
                    <el-col :span="12" class="columnInfo-label">
                      <div style="text-align: left;vertical-align: middle;">
                        <router-link to="" class="columnInfo-value-intro">
                          <p class="columnInfo-value-remark" style="color: #5FBCFC;" @click="lookPower">查看权限</p>
                        </router-link>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-row>
                <el-col :span="4" class="columnInfo-label">
                  <div align="right">
                    <p>支付宝认证状态：</p>
                  </div>
                </el-col>
                <el-col :span="20" class="columnInfo-value">
                  <el-row :gutter="0">
                    <el-col :span="24">
                      <div align="left" class="columnInfo-value-intro">
                        <p>已认证</p>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="0" type="flex" justify="left">
                    <el-col :span="24">
                      <div class="columnInfo-value-intro" align="left">
                        <p class="columnInfo-value-remark" />
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-row>
                <el-col :span="4" class="columnInfo-label">
                  <div align="right">
                    <p>小程序头像：</p>
                  </div>
                </el-col>
                <el-col :span="20" class="columnInfo-value">
                  <el-row :gutter="0">
                    <el-col :span="24">
                      <div align="left" class="columnInfo-value-intro">
                        <img :src="params.openAuthOfExtend.openAuthOfAlipayOpen.headImg" width="50" height="50">
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="0" type="flex" justify="left">
                    <el-col :span="24">
                      <div class="columnInfo-value-intro" align="left">
                        <p class="columnInfo-value-remark" />
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-row style="display: flex;">
                <el-col :span="4" class="columnInfo-label">
                  <div align="right">
                    <p>小程序二维码：</p>
                  </div>
                </el-col>
                <el-col :span="16" class="columnInfo-value">
                  <el-row :gutter="0">
                    <el-col :span="24">
                      <div align="left" class="columnInfo-value-intro">
                        <img :src="params.openAuthOfExtend.openAuthOfAlipayOpen.qrcodeUrl" width="50" height="50" @click="handleQrCodePreview()">
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="4" class="columnInfo-value">
                  <el-row style="display: flex;">
                    <el-col :span="24" class="columnInfo-label">
                      <div style="text-align: center;vertical-align: middle;">
                        <p class="columnInfo-value-remark copy-btn" :data-clipboard-text="params.openAuthOfExtend.openAuthOfAlipayOpen.qrcodeUrl" style="color: #5FBCFC;font-size: 12px;" @click="handleDown">复制二维码链接</p>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="padding-bottom: 15px;">
              <el-row>
                <el-col :span="4" class="columnInfo-label">
                  <div align="right">
                    <p>认证主体公司：</p>
                  </div>
                </el-col>
                <el-col :span="20" class="columnInfo-value">
                  <el-row :gutter="0">
                    <el-col :span="24">
                      <div align="left" class="columnInfo-value-intro">
                        <p>{{ params.openAuthOfExtend.openAuthOfAlipayOpen.principalName }}</p>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="0" type="flex" justify="left">
                    <el-col :span="24">
                      <div class="columnInfo-value-intro" align="left">
                        <p class="columnInfo-value-remark">注册本小程序账号的主体公司信息；</p>
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <el-header class="headerInfo">
          <div align="left">
            <h4>账号信息</h4>
          </div>
        </el-header>
        <div>
          <el-row>
            <el-col :span="24">
              <el-row>
                <el-col :span="4" class="columnInfo-label">
                  <div align="right">
                    <p>APPID：</p>
                  </div>
                </el-col>
                <el-col :span="20" class="columnInfo-value">
                  <el-row :gutter="0">
                    <el-col :span="24">
                      <div align="left" class="columnInfo-value-intro">
                        <p>{{ params.appId }}</p>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="0" type="flex" justify="left">
                    <el-col :span="24">
                      <div class="columnInfo-value-intro" align="left">
                        <p class="columnInfo-value-remark" />
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-row>
                <el-col :span="4" class="columnInfo-label">
                  <div align="right">
                    <p>原始ID：</p>
                  </div>
                </el-col>
                <el-col :span="20" class="columnInfo-value">
                  <el-row :gutter="0">
                    <el-col :span="24">
                      <div align="left" class="columnInfo-value-intro">
                        <p>{{ params.openAuthOfExtend.openAuthOfAlipayOpen.originalId }}</p>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="0" type="flex" justify="left">
                    <el-col :span="24">
                      <div class="columnInfo-value-intro" align="left">
                        <p class="columnInfo-value-remark" />
                      </div>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-container>
    <el-dialog title="查看权限" :visible.sync="dialogTableVisible" width="60%" append-to-body>
      <el-table :data="dataList">
        <el-table-column property="funcscopeCategory" label="授权功能代码" width="150" />
        <el-table-column property="funcscopeCategoryName" label="授权功能代码名称" width="180" />
        <el-table-column property="funcscopeCategoryRemark" label="授权功能代码备注" min-width="180" />
      </el-table>
    </el-dialog>
    <el-dialog width="30%" :visible.sync="dialogQrCodeVisible" :modal-append-to-body="false" :close-on-click-modal="false" :append-to-body="true">
      <div style="text-align: center">
        <img style="width:300px;height:300px" :src="dialogQrCodeImageUrl" alt="">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAlipayAuthorizeUrl, queryOrUpdateOpenAuthInfo, queryAlipayOpenAuthFuncList } from '@/api/aliPay'
import url from '@/utils/url'
import Clipboard from 'clipboard'
export default {
  components: {},
  data() {
    return {
      publishStatus: false,
      dialogTableVisible: false,
      dialogQrCodeVisible: false,
      dialogQrCodeImageUrl: '',
      params: {
        openAuthOfExtend: {
          openAuthOfAlipayOpen: {}
        }
      },
      dataList: [],
      codeUrl: '',
      paramsData: {
        tenantId: '',
        appId: '',
        openAppId: '',
        componentAppId: '',
        type: 1,
        auth_code: '',
        expires_in: ''
      }
    }
  },
  computed: {},
  watch: {},
  mounted() {
  },
  created() {
    if (url.paramsMap().appId === undefined) {
      this.paramsData.appId = ''
      this.paramsData.tenantId = ''
      this.paramsData.openAppId = ''
      this.paramsData.type = 1
      this.paramsData.componentAppId = ''
      this.paramsData.auth_code = ''
      this.paramsData.expires_in = ''
      this.getOpenAuthInfo()
    } else {
      this.paramsData.appId = url.paramsMap().appId
      this.paramsData.tenantId = url.paramsMap().tenantId
      this.paramsData.openAppId = url.paramsMap().openAppId
      this.paramsData.componentAppId = url.paramsMap().componentAppId
      this.paramsData.type = url.paramsMap().type
      this.paramsData.auth_code = url.paramsMap().auth_code
      this.paramsData.expires_in = url.paramsMap().expires_in
      this.getOpenAuthInfo()
    }
  },
  methods: {
    getOpenAuthInfo() {
      queryOrUpdateOpenAuthInfo(this.paramsData).then(res => {
        this.params = res
        this.params.openAuthOfExtend = res.openAuthOfExtend
        this.params.openAuthOfExtend.openAuthOfAlipayOpen = res.openAuthOfExtend.openAuthOfAlipayOpen
        this.codeUrl = this.params.openAuthOfExtend.openAuthOfAlipayOpen.qrcodeUrl
        this.publishStatus = res.hasOpenAuth
      })
    },
    cancelAuth() {
      alert('取消授权')
    },
    // 下载二维码 复制二维码地址
    handleDown() {
      const _this = this
      const clipboard = new Clipboard('.copy-btn') // 这里括号里填写上面点击事件绑定的class名
      clipboard.on('success', e => {
        // 复制成功，提示根据自己项目实际使用的UI来写
        _this.$message.success('复制图片链接成功')
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制，提示根据自己项目实际使用的UI来写
        _this.$message.error('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
      })
    },
    handleQrCodePreview() {
      this.dialogQrCodeImageUrl = this.params.openAuthOfExtend.openAuthOfAlipayOpen.qrcodeUrl
      this.dialogQrCodeVisible = true
    },
    // 查看权限
    lookPower() {
      queryAlipayOpenAuthFuncList(this.params.appId).then(res => {
        this.dataList = res
      })
      this.dialogTableVisible = true
    },
    bandAlipayApplet() {
      getAlipayAuthorizeUrl(1).then(res => {
        window.location.href = res.url
      })
    },
    goAlipayRegistration() {
      window.open(`https://b.alipay.com`)
    }
  }
}
</script>
<style lang="scss" scoped>
.home-container {
  background: #fff;
  padding: 10px;
  // height: 650px;
  height: 100%;
  border-radius: 3px;
  .columnInfo-value-remark{
    cursor: pointer;
  }
  .clearfix{
    padding:10px;
    padding-top: 0;
    height: 30px;
    display: flex;
    align-items: center;
    >div {
      border: 1px solid #e6ebf5;
      flex-grow: 1;
      width:0;
      margin-right: 20px;
    }
  }
  .cardInfo {
    margin-top: 20px;
    .wechatApplet {
      padding:20px;
      padding-top: 0;
      display: flex;
      align-items: center;
      >div {
        border: 0px solid #e6ebf5;
        flex-grow: 1;
        width:0;
        margin-right: 20px;
      }
      >div:last-child {
        margin-right: 0;
      }
    }
    .linkStr {
      color: #9FC4F0;
      cursor: pointer;
    }
    .wechatApplet-detail {
      padding: 20px;
      display: flex;
      align-items:center;
      >div {
        border: 1px solid #e6ebf5;
        flex-grow: 1;
        width:0;
        margin-right: 20px;
        align-items:center;
      }
      >div:last-child {
        margin-right: 0;
        align-items:center;
      }
    }

    .wechatApplet-detail-item {
      margin-bottom: 10px;
      padding-right: 10px;
      padding-left: 10px;
      padding-bottom: 20px;
      .item-img{
        border-radius: 4px;
        overflow: hidden;
        min-width: inherit;
        align-items:center;
        img {
          width: 150px;
          height: 150px;
        }
      }
  .list-item {
      position: relative;
      border: 0px solid #dddce2;
      border-radius: 4px;
      padding: 10px;
      display: inline-block;
      height: auto;
      width: 100%;
      .item-img{
        border-radius: 4px;
        overflow: hidden;
        min-width: inherit;
        align-self: center;
        img {
          width: 150px;
          height: 150px;
        }
      }
      .item-intro{
        padding-left: 10px;
        letter-spacing: 0.5px;
        .intro-title {
          font-size: 14px;
          line-height: 24px;
          color: #595961;
          margin: -4px 0 0;
          font-weight: 700;
          letter-spacing: 1px;
        }
        .text-elepsis {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .intro-detail {
          font-size: 12px;
          line-height: 20px;
          color: #9797A1;
          font-weight: 500;
          margin: 0;
        }
      }
      .fl{
        float: left;
      }
     }
    }
   }
   .wechatApplet-containerInfo{
     border: 1px solid #dddce2;
     margin-bottom: 10px;
     overflow: auto;
     width: 100%;
   }
   .headerInfo {
       display: flex;
       background-color: #F8F8F8;
       color: #333;
       text-align: left;
       display: flex;
       justify-content: space-between;
       margin: -4px 0 0;
       padding: 10px;
     }
     .columnInfo-label{
       padding:10px;
       margin: 0;
       text-align: left;
       border-bottom: 0px solid #dddce2;
     }
     .columnInfo-value{
       padding:0px;
       margin: 0;
       text-align: left;
       border-bottom: 1px solid #dddce2;
     }
     .columnInfo-value-intro{
       padding-left: 10px;
       letter-spacing: 0.5px;
       .columnInfo-value-title {
         font-size: 14px;
         line-height: 24px;
         color: #595961;
         margin: -4px 0 0;
         font-weight: 700;
         letter-spacing: 1px;
       }
       .columnInfo-value-text-elepsis {
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
       }
       .columnInfo-value-remark {
         font-size: 12px;
         line-height: 20px;
         color: #9797A1;
         font-weight: 500;
         margin: 0;
         text-overflow:ellipsis;
         white-space:nowrap;
         overflow:hidden;
       }
     }
}
</style>
